<template>
	<view class="activityDetail">
		<view class="nav_bar">
			<uni-nav-bar statusBar fixed :border="false" @clickLeft="back">
				<block slot="left">
					<view class="back_btn">
						<uni-icons type="back" color="#fff" size="20"></uni-icons>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<view class="detail_t">
			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="false" autoplay :interval="3000" :duration="500"
					@change="swiperChange">
					<block v-for="item in list" :key="item">
						<swiper-item>
							<view class="swiper-item">
								<image :src="item" mode=""></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="custom-dots">{{currentSwiper}}/{{list.length}}</view>
			</view>
			<view class="activity_info">

				<view class="activity_base_info">
					<view class="info_1">
						<view class="activity_title">星际之旅--潮玩国庆</view>
						<view class="price">
							<text>￥</text>
							<text class="price_val">99</text>
						</view>
					</view>
					<view class="info_2">
						<view class="">库存：100</view>
						<view class="">销量：50</view>
					</view>
					<view class="info_3">
						<text>地址：四川省成都市广汉市三星堆博物馆</text>
						<uni-icons type="location-filled" color="#999999" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="activity_desc">
			<view class="desc_title">产品介绍</view>
			<view class="">
				<rich-text :nodes="strings"></rich-text>
			</view>
		</view>
		<view class="buy_btn">
			<view class="" @tap="$refs.popup.open()">立即购买</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_box">
				<view class="box_1">
					<image class="cover_img" src="../../../static/img/active-bg.png" mode=""></image>
					<view class="">
						<view class="activity_title">星际之旅--潮玩国庆</view>
						<view class="price">
							<text>￥</text>
							<text class="price_val">99</text>
						</view>
					</view>
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
				<view class="box_2">
					<view class="spec_title">规格</view>
					<view class="spec_list">
						<block v-for="item in 8" :key="item">
							<view class="spec_item" :class="{'select_spec':currentSpec==item}" @tap="currentSpec=item">
								11月11日半日营</view>
						</block>
					</view>
				</view>
				<view class="confirm_btn" @tap="$refs.popup.close()">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details:{},
				list: [1, 2, 3, 4],
				currentSwiper: 1,
				strings: '这里是产品介绍的内容。。。。。。',
				currentSpec: 1
			};
		},
		onLoad(opt){
			this.id=opt.id
			this.getDetail()
		},
		methods: {
			async getDetail() {
				const res = await this.$api.get(`product/detail/${this.id}`, {});
				console.log(res,"---")
				if (res.code == 200) {
					this.details=res.data
					// res.data.content.replace(/<img/g, '<img style="width:100%;height:auto;" class="maxImg"');
					this.list  = JSON.parse(res.data.sliderImage);
				}
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current + 1;
			}
		}
	}
</script>

<style lang="scss">
	p {
		text-indent: 2em;
	}
	.activityDetail {
		.nav_bar {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;

			/deep/.uni-navbar {
				// opacity: 0;
				.uni-navbar__content {
					background-color: transparent !important;

					.uni-navbar__header {
						background-color: transparent !important;
					}
				}
			}

			.back_btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.detail_t {
			width: 100%;
			height: 728rpx;
			position: relative;
			border-bottom: 14rpx solid #F7F7F7;

			.banner {
				position: relative;

				.swiper {
					width: 100%;
					height: 608rpx;

					.swiper-item {
						image {
							width: 100%;
							height: 608rpx;
						}
					}
				}

				.custom-dots {
					width: 66rpx;
					height: 34rpx;
					border-radius: 17rpx;
					line-height: 34rpx;
					text-align: center;
					background-color: rgba(0, 0, 0, 0.4);
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					right: 26rpx;
					bottom: 80rpx;
					z-index: 9;
				}
			}

			.activity_info {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 9;
				display: flex;
				align-items: flex-end;



				.activity_base_info {
					width: 100%;
					height: 182rpx;
					border-radius: 60rpx 60rpx 0 0;
					background-color: #fff;
					padding: 30rpx 28rpx 0;
					box-sizing: border-box;

					.info_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.activity_title {
							font-size: 32rpx;
							font-weight: bold;
							line-height: 32rpx;
						}

						.price {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF0404;

							.price_val {
								font-size: 40rpx;
							}
						}
					}

					.info_2,
					.info_3 {
						font-size: 24rpx;
						color: #999999;
						display: flex;
						align-items: center;
						line-height: 24rpx;
					}

					.info_2 {
						padding: 22rpx 0 12rpx;

						>view {
							margin-right: 60rpx;
						}
					}
				}
			}
		}

		.activity_desc {
			padding: 34rpx 26rpx;
			box-sizing: border-box;

			.desc_title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 32rpx;
				margin-bottom: 36rpx;
			}
		}

		.buy_btn {
			padding: 0 26rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;

			>view {
				width: 100%;
				height: 92rpx;
				border-radius: 20rpx;
				background-color: #2E80FE;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
			}
		}

		.popup_box {
			padding: 46rpx 26rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.box_1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 66rpx;

				.cover_img {
					width: 146rpx;
					height: 146rpx;
					border-radius: 14rpx;
				}

				>view {
					height: 146rpx;
					flex: 1;
					margin: 0 34rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.activity_title {
						font-size: 30rpx;
						font-weight: bold;
						line-height: 30rpx;
					}

					.price {
						font-size: 22rpx;
						font-weight: bold;
						color: #FF0404;

						.price_val {
							font-size: 32rpx;
						}
					}
				}
			}

			.box_2 {
				margin-bottom: 30rpx;

				.spec_title {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 22rpx;
				}

				.spec_list {
					display: flex;
					flex-wrap: wrap;

					.spec_item {
						width: 234rpx;
						height: 46rpx;
						background-color: #F0F0F0;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						line-height: 46rpx;
						border-radius: 6rpx;
						margin-bottom: 30rpx;
					}

					.spec_item:nth-child(n+1) {
						margin-right: 54rpx;
					}

					.select_spec {
						background-color: #EDF4FF;
						color: #2E80FE;
					}
				}
			}

			.confirm_btn {
				width: 100%;
				height: 92rpx;
				border-radius: 20rpx;
				background-color: #2E80FE;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
			}
		}
	}
</style>